<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="/static/cropper/cropper.min.css">
    <script src="/static/cropper/jquery.min.js"></script>
    <script src="/static/cropper/cropper.min.js"></script>
    <style>
        .container {
            width: 960px;
            height: 600px;
            margin: 0 auto;
        }

        #preview {
            width: 100px;
            height: 100px;
            overflow: hidden;
        }
    </style>
</head>

<body>
    <div class="container">
        <img src="/static/cropper/example.jpg">
    </div>
    <br>
    <div id="preview"><img src="" alt=""></div>
    <br>
    <div>
        <button id="do">裁剪</button>
    </div>
    <div id="result"></div>
    <div>
        <button id="get_data">获取数据</button>
    </div>
    <div>
        <button id="reset">重置</button>
    </div>
    <div>
        <button id="position">位置</button>
    </div>
    <div>
        <button id="upload">上传数据至服务器</button>
    </div>
    <script>
        var $img = $('.container > img');
        $(document).ready(function () {

            //因为图片是异步加载的，所以你需要在built之后才能调用下面的方法
            $img.cropper({
                aspectRatio: 1,
                crop: function (data) {
                    // 出来裁切后的图片数据.
                    console.log(data);
                },
                preview: $('#preview'),
                autoCrop: true,
                built: function () {
                    // $img.cropper('setCropBoxData', {
                    //     left: 250,
                    //     top: 250,
                    //     width: 100,
                    //     height: 100
                    // });
                }
            });



            $('#do').click(function () {
                var result = $img.cropper("getCroppedCanvas", { "width": 300, "height": 300 });
                console.log(result.toDataURL())
                $('#result').html(result);
            });
            $('#get_data').click(function () {
                var result = $img.cropper("getData");
                var result2 = $img.cropper("getContainerData");
                var result3 = $img.cropper("getImageData");
                var result4 = $img.cropper("getCanvasData");
                var result5 = $img.cropper("getCropBoxData");
                console.log('getData', result);
                console.log('getContainerData', result2);
                console.log('getImageData', result3);
                console.log('getCanvasData', result4);
                console.log('getCropBoxData', result5);
            });
            $('#reset').click(function () {
                $img.cropper('reset');
            });
            $('#position').click(function () {
                $img.cropper('setCropBoxData', {
                    left: 100,
                    top: 100,
                    width: 200,
                    height: 200
                });
            });
            $('#upload').click(function () {
                var result = $img.cropper("getData");
                $.post('/index/cropper/upload', result, function (data) {
                    console.log(data);
                }, 'json');
            });
        });
    </script>
</body>

</html>